<template>
  <div class="normal-project-milestone">
    <!-- 基线比对 -->
    <div class="milestone-base-compare-select">
      基线对比：
      <el-select v-model="milestoneConfig.baselineCompareValue" placeholder="请选择" size="small" @change="baselineCompareHandle">
        <el-option
          v-for="item in milestoneConfig.baselineOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <!-- 比对结果 -->
    <div class="milestone-base-compare-result">
      <div class="base-line-div">
        <div class="info" v-for="(item, index) in milestoneConfig.milestoneData" :key="index">
          <!-- 里程碑 -->
          <div class="top-div" v-if="item.milestoneType == '里程碑'">
            <span class="top">
              {{item.milestoneName}}
            </span>
            <i class="el-icon-caret-bottom" style="font-size:20px;padding: 15px 0 0 0;"></i>
          </div>
          <!-- 迭代 -->
          <div class="iter-top-div" v-if="item.milestoneType == '迭代'">
            <div class="iter-top">
              <div>
                状态：{{item.milestoneStatus}}
              </div>
              <div>
                {{item.milestoneFinishDate.substring(0,10)}}
              </div>
              <div>
                基线：{{item.baselineMilestoneFinishDate.substring(0,10) ? item.baselineMilestoneFinishDate.substring(0,10): "无"}}
              </div>
              <div class="delay" v-if="item.baselineCompareValue && item.baselineCompareValue != '0'">
                基线落后{{item.baselineCompareValue}}天
              </div>
            </div>
          </div>
          <div class="middle-div">
            <hr size=1 class="split-line">
          </div>
          <!-- 里程碑 -->
          <div class="bottom-div" v-if="item.milestoneType == '里程碑'">
            <div class="bottom">
              <div>
                状态：{{item.milestoneStatus}}
              </div>
              <div>
                {{item.milestoneFinishDate.substring(0,10)}}
              </div>
              <div>
                基线：{{item.baselineMilestoneFinishDate.substring(0,10) ? item.baselineMilestoneFinishDate.substring(0,10): "无"}}
              </div>
              <div class="delay" v-if="item.baselineCompareValue && item.baselineCompareValue != '0'">
                基线落后{{item.baselineCompareValue}}天
              </div>
            </div>
          </div>
          <!-- 迭代 -->
          <div class="iter-bottom-div" v-if="item.milestoneType == '迭代'">
            <i class="el-icon-caret-top" style="font-size:20px;"></i>
            <span class="iter-bottom">
              {{item.milestoneName}}
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 基线列表 -->
    <div class="milestone-base-compare-table">
      <biz-milestone-manage
        ref="milestoneChild"
        @getMilestoneData="getMilestoneData"
        @getBaselineList="getBaselineList"
        :currentProjectInfo.sync="projectInfo">
      </biz-milestone-manage>
    </div>
  </div>
</template>
<script>
import { reqCommonMsg } from '@/util/reqCommonMsg';
import {mapGetters} from 'vuex';
import BizMilestoneManage from '@/views/biz/milestone/bizMilestoneManage.vue';
export default {
  props: {
    projectInfo: {
      type: Object
    },
  },
  components: {
    BizMilestoneManage
  },
  data () {
    return {
      // 里程碑信息
      milestoneConfig: {
        // 请求参数区
        milestonePage: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        // 基线比对下拉框列表
        baselineOptions: [],
        // 基线比对选择值
        baselineCompareValue: '',
        milestoneData: [],
        milestoneOption:{
          column: [
            {
              label: '排序序号',
              prop: 'orderSeq', 
              type: 'number', 
              search: false,
              searchMmultiple: false,
              searchLabelWidth: 100,
              multiple: false,
              span: 12,
              sortable: false,
              hide: false,
              overHidden: true,
              value: '1',
              rules: [{
                required:  false,
                message: '请输入内容',
                trigger: 'blur'
              }],
              dicData:[]
            },
            {
              label: '里程碑名称',
              prop: 'milestoneName', 
              type: 'input', 
              search: false,
              searchMmultiple: false,
              searchLabelWidth: 100,
              multiple: false,
              span: 12,
              sortable: false,
              hide: false,
              maxlength: 50,
              overHidden: true,
              rules: [{
                message: '请输入里程碑名称',
                required:  true,
                trigger: 'blur'
              },
              {
                max: 50,
                message: '内容长度不能超过50字符',
                trigger: 'blur'
              }],
              dicData:[],
            },
            {
              label: '里程碑类型',
              prop: 'milestoneType', 
              type: 'select', 
              search: false,
              searchMmultiple: false,
              searchLabelWidth: 100,
              multiple: false,
              span: 12,
              sortable: false,
              hide: false,
              maxlength: 30,
              overHidden: true,
              rules: [{
                message: '请输入里程碑类型',
                required:  true,
                trigger: 'blur'
              },
              {
                max: 30,
                message: '内容长度不能超过30字符',
                trigger: 'blur'
              }],
              dicData:[],
            },
            {
              label: '里程碑状态',
              prop: 'milestoneStatus', 
              type: 'input', 
              search: false,
              searchMmultiple: false,
              searchLabelWidth: 100,
              multiple: false,
              span: 12,
              sortable: false,
              hide: false,
              maxlength: 30,
              overHidden: true,
              rules: [{
                message: '请输入里程碑状态',
                required:  true,
                trigger: 'blur'
              },
              {
                max: 30,
                message: '内容长度不能超过30字符',
                trigger: 'blur'
              }],
              dicData:[],
            },
            {
              label: '里程碑完成日期',
              prop: 'milestoneFinishDate', 
              type: 'date', 
              format:'yyyy-MM-dd',
              valueFormat: 'yyyy-MM-dd',
              value: this.$toolUtil.formatDate(new Date()),
              pickerOptions: {
                disabledDate(time) {
                  return time.getTime() + 3600 * 1000 * 24 <= Date.now();
                }
              },
              search: false,
              searchMmultiple: false,
              searchLabelWidth: 100,
              multiple: false,
              span: 12,
              sortable: false,
              hide: false,
              maxlength: 20,
              overHidden: true,
              rules: [{
                message: '请输入里程碑完成日期',
                required:  true,
                trigger: 'blur'
              },
              {
                max: 20,
                message: '内容长度不能超过20字符',
                trigger: 'blur'
              }],
              dicData:[],
            },
            {
              label: '里程碑描述',
              prop: 'milestoneDesc', 
              type: 'input', 
              search: false,
              searchMmultiple: false,
              searchLabelWidth: 100,
              multiple: false,
              span: 12,
              sortable: false,
              hide: true,
              maxlength: 2000,
              overHidden: true,
              rules: [{
                message: '请输入里程碑描述',
                required:  false,
                trigger: 'blur'
              },
              {
                max: 2000,
                message: '内容长度不能超过2000字符',
                trigger: 'blur'
              }],
              dicData:[],
            },
          ]
        }
      }
    }
  },
  watch: {
    
  },
  computed: {
    ...mapGetters(['website','userInfo','orgTree','permission','genOrgTree'])
  },
  created() { 
    
  },
  mounted(){
    
  },
  methods:{
    /**
     * 获取里程碑数据
     */
    getMilestoneData(data){
      this.milestoneConfig.milestoneData = data;
    },
    /**
     * 获取里程碑基线列表
     */
    getBaselineList(data){
      this.milestoneConfig.baselineOptions = [];
      if(data && data.length > 0){
        for(let baseline of data){
          this.milestoneConfig.baselineOptions.push({
            label: baseline,
            value: baseline
          });
        }
      }
      this.milestoneConfig.baselineOptions.push({
        label: '关闭',
        value: '关闭'
      })
    },
    /**
     * 基线比对
     */
    baselineCompareHandle(value){
      this.$refs.milestoneChild.baselineCompareHandle(this.milestoneConfig.baselineCompareValue);
    },
  }
}
</script>
<style lang="scss">
  .normal-project-milestone{
    height: 100%;
    .milestone-base-compare-select{
      text-align: right;
      padding: 0 8px 0 0;
    }
    .milestone-base-compare-result::-webkit-scrollbar {
      width: 30px!important;
      height: 4px!important;
    }
    .milestone-base-compare-result::-webkit-scrollbar-track {
      border-radius: 10px;
    }
    /*定义滑块 内阴影+圆角*/
    .milestone-base-compare-result::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: #919191;
    }
    .milestone-base-compare-result{
      height: 250px;
      margin: 10px 8px 10px 8px;
      border: 1px solid black;
      border-radius: 5px;
      position: relative;
      overflow-x: scroll;
      overflow-y: hidden;
      .base-line-div{
        position: absolute;
        display: flex;
        height: 100%;
        .info{
          font-size: 14px;
          .top-div{
            height: 50%;
            padding: 50px 40px 0 40px;
            text-align: center;
            .top{
              display: block;
              height: 25px;
              border: 1px solid black;
              border-radius: 5px;
              // width: 70px;
              text-align: center;
            }
          }
          .middle-div{
            .split-line{
              top: 45%;
              margin: 0 5px 0 5px;
              height: 2px;
              background-color: #75756c;
              width: 100%;
            }
          }
          .bottom-div{
            height: 50%;
            padding: 10px 40px 0 40px;
            .bottom{
              display: block;
              height: 25px;
              border-radius: 5px;
              width: 130px;
              text-align: center;
              .delay{
                background: red;
                color: white;
                margin: 5px 0 0 0;
              }
            }
          }
          .iter-top-div{
            height: 50%;
            padding: 15px 40px 0 40px;
            text-align: center;
            .iter-top{
              display: block;
              height: 25px;
              border-radius: 5px;
              width: 130px;
              text-align: center;
              .delay{
                background: red;
                color: white;
                margin: 5px 0 0 0;
              }
            }
          }
          .iter-bottom-div{
            height: 50%;
            padding: 10px 40px 0 40px;
            text-align: center;
            .iter-bottom{
              display: block;
              height: 25px;
              border: 1px solid black;
              border-radius: 5px;
              margin: 15px 0 0 0;
              text-align: center;
            }
          }
        }
      }
    }
  }
</style>